<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <title>五窗口模板</title>
    <link href="../../../../resources/lib/bui/css/dpl-min.css"
          th:href="@{/resources/lib/bui/css/dpl-min.css}"
          rel="stylesheet" />
    <link href="../../../../resources/lib/bui/css/bui-min.css"
          th:href="@{/resources/lib/bui/css/bui-min.css}"
          rel="stylesheet" />
    <link href="../../../../resources/lib/bui/css/bui-min.css"
          th:href="@{/resources/lib/bui/css/layout-min.css}"
          rel="stylesheet" />
    <script src="../../../../resources/lib/bui/js/jquery-1.8.1.min.js"
            th:src="@{/resources/lib/bui/js/jquery-1.8.1.min.js}"></script>
    <script src="../../../../resources/lib/bui/js/bui-min.js"
            th:src="@{/resources/lib/bui/js/bui-min.js}"></script>
    <script src="../../../../resources/lib/jquery/jquery.form.min.js"
            th:src="@{/resources/lib/jquery/jquery.form.min.js}"></script>
    <script src="../../../../resources/lib/jquery/jquery.util.js"
            th:src="@{/resources/lib/jquery/jquery.util.js}"></script>
    <style type="text/css">
        a{color:#fff;font-size: 24px;}
        a:visited{text-decoration:none; color:red;}
        a:hover{text-decoration:none; color:red;}
    </style>
</head>
<body>
<div id="add" th:include="nh/template/addLinkDialog :: add" style="display: none;width:100%;height: 100%;"></div>
<div id="setting" th:include="nh/template/template_setting :: setting" style="display: none;width:100%;height: 100%;"></div>
<div class="demo-content">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style type="text/css">
        a{color:#fff;text-decoration:none;font-size:24px;}
    </style>
    <script type="text/javascript">
        var winWidth = 0;
        var winHeight = 0;
        var control5_1 = null;
        var control5_2 = null;
        findDimensions5();
        //函数：获取尺寸
        function findDimensions5(){
            //获取窗口宽度
            if (window.innerWidth)
                winWidth = window.innerWidth;
            else if ((document.body) && (document.body.clientWidth))
                winWidth = document.body.clientWidth;
            //获取窗口高度
            if (window.innerHeight)
                winHeight = window.innerHeight;
            else if ((document.body) && (document.body.clientHeight))
                winHeight = document.body.clientHeight;
            //通过深入Document内部对body进行检测，获取窗口大小
            if (document.documentElement  && document.documentElement.clientHeight && document.documentElement.clientWidth)
            {
                winHeight = document.documentElement.clientHeight;
                winWidth = document.documentElement.clientWidth;
            }
            winHeight-=2;
            winWidth-=2;
            initLayout();
        }
        //初始化布局
        function initLayout(){
            BUI.use(['bui/layout','bui/grid','bui/data','bui/tree'],function (Layout,Grid,Data,Tree) {
                control5_1 = new BUI.Component.Controller({
                    width:winWidth,
                    height:winHeight/2,
                    // srcNode : '#div1',
                    elCls : 'ext-border-layout',
                    children : [{
                        xclass : 'controller',
                        layout : {
                            region : 'east',
                            fit : 'both',
                            //collapsable : true,
                            //collapsed : true,
                            title : '<a href="javascript:void(0)" onclick="showDialog(control5_1,\'c5_1\',1,nodeId)">+</a>&nbsp;&nbsp;<span id="title1"></span>',
                            width : (1/3)*winWidth
                        },
                        id : 'c5_1',
                        content : ''
                    },{
                        xclass : 'controller',
                        layout : {
                            title : '<a href="javascript:void(0)" onclick="showDialog(control5_1,\'c5_2\',2,nodeId)">+</a>&nbsp;&nbsp;<span id="title2"></span>',
                            region : 'center',
                            fit : 'both'
                        },
                        id : 'c5_2',
                        content : ''
                    }],
                    plugins : [Layout.Border]
                }).render();
                control5_2 = new BUI.Component.Controller({
                    width:winWidth,
                    height:winHeight/2,
                    // srcNode : '#div2',
                    elCls : 'ext-border-layout',
                    children : [{
                        xclass : 'controller',
                        layout : {
                            region : 'east',
                            fit : 'both',
                            //collapsable : true,
                            //collapsed : true,
                            title : '<a href="javascript:void(0)" onclick="showDialog(control5_2,\'c5_3\',3,nodeId)">+</a>&nbsp;&nbsp;<span id="title3"></span>',
                            width :  (1/3)*winWidth
                        },
                        id : 'c5_3',
                        elCls : 'red',
                        content : ''
                    },{
                        xclass : 'controller',
                        layout : {
                            region : 'west',
                            fit : 'both', //height,width,both,none
                            //collapsable : true,
                            title : '<a href="javascript:void(0)" onclick="showDialog(control5_2,\'c5_4\',4,nodeId)">+</a>&nbsp;&nbsp;<span id="title4"></span>',
                            width : (1/3)*winWidth
                        },
                        id : 'c5_4',
                        content : ''
                    },{
                        xclass : 'controller', //Grid
                        layout : {
                            region : 'center',
                            fit : 'both',
                            title : '<a href="javascript:void(0)" onclick="showDialog(control5_2,\'c5_5\',5,nodeId)">+</a>&nbsp;&nbsp;<span id="title5"></span>'
                        },
                        id : 'c5_5',
                        content : ''
                    }],
                    plugins : [Layout.Border]
                }).render();
                findInitInfor(nodeId);
            });
        }

        function choseTemplate(modelCount) {
            if(treeMenu!=null) {
                if(treeMenu.title1!=null&&treeMenu.title1!=""){
                    $('#title1').html(treeMenu.title1);
                }
                if(treeMenu.modelUrl1!=null&&treeMenu.modelUrl1!=""){
                    var url = treeMenu.modelUrl1.split("|");
                    if (judgeLink(url[0])) {
                        control5_1.getChild('c5_1').set('content','<iframe src=' + url[0] + ' height="100%" width="100%" scrolling='+ url[1]+'></iframe>');
                    } else if (judgeImg(url[0])) {
                        control5_1.getChild('c5_1').set('content','<img src='+url[0]+' height="100%" width="100%">');
                    }
                }
                if(treeMenu.title2!=null&&treeMenu.title2!=""){
                    $('#title2').html(treeMenu.title2);
                }
                if(treeMenu.modelUrl2!=null&&treeMenu.modelUrl2!=""){
                    var url = treeMenu.modelUrl2.split("|");
                    if (judgeLink(url[0])) {
                        control5_1.getChild('c5_2').set('content','<iframe src=' + url[0] + ' height="100%" width="100%" scrolling='+ url[1]+'></iframe>');
                    } else if (judgeImg(url[0])) {
                        control5_1.getChild('c5_2').set('content','<img src='+url[0]+' height="100%" width="100%">');
                    }
                }
                if(treeMenu.title3!=null&&treeMenu.title3!=""){
                    $('#title3').html(treeMenu.title3);
                }
                if(treeMenu.modelUrl3!=null&&treeMenu.modelUrl3!=""){
                    var url = treeMenu.modelUrl3.split("|");
                    if (judgeLink(url[0])) {
                        control5_2.getChild('c5_3').set('content','<iframe src=' + url[0] + ' height="100%" width="100%" scrolling='+ url[1]+'></iframe>');
                    } else if (judgeImg(url[0])) {
                        control5_2.getChild('c5_3').set('content','<img src='+url[0]+' height="100%" width="100%">');
                    }
                }
                if(treeMenu.title4!=null&&treeMenu.title4!=""){
                    $('#title4').html(treeMenu.title4);
                }
                if(treeMenu.modelUrl4!=null&&treeMenu.modelUrl4!=""){
                    var url = treeMenu.modelUrl4.split("|");
                    if (judgeLink(url[0])) {
                        control5_2.getChild('c5_4').set('content','<iframe src=' + url[0] + ' height="100%" width="100%" scrolling='+ url[1]+'></iframe>');
                    } else if (judgeImg(url[0])) {
                        control5_2.getChild('c5_4').set('content','<img src='+url[0]+' height="100%" width="100%">');
                    }
                }
                if(treeMenu.title5!=null&&treeMenu.title5!=""){
                    $('#title5').html(treeMenu.title5);
                }
                if(treeMenu.modelUrl5!=null&&treeMenu.modelUrl5!=""){
                    var url = treeMenu.modelUrl5.split("|");
                    if (judgeLink(url[0])) {
                        control5_2.getChild('c5_5').set('content','<iframe src=' + url[0] + ' height="100%" width="100%" scrolling='+ url[1]+'></iframe>');
                    } else if (judgeImg(url[0])) {
                        control5_2.getChild('c5_5').set('content','<img src='+url[0]+' height="100%" width="100%">');
                    }
                }
            }
            $('.x-border-title').css('padding','3px');
            $('.ext-border-layout').css('padding','0px');
        }
    </script>
    <!-- script end -->
</div>
</body>
</html>